<template>
  <div>
		<van-nav-bar  title="订单详情" left-arrow @click-left="$utils.back($route.path)" />
			<div class="nav-top" >
				<div class="title"><span class="status">{{model.StateName}}</span><span v-if="model.State === 0 && showPayTime">请在{{ remainder }}内完成支付</span></div>
				<!-- 订单顶部 -->
				<div class="pd-24 mg-24 br-16 bg-white">
					<div class="flex flex-s-c fs-34 fw-b">
						<div>{{ info.StateName }}</div>
						<div class="flex flex-v-c"><span class="fs-24">￥</span>{{ info.ReceiptMoney }}</div>
					</div>
				
					<div class="mtb-24 pd-24 br-16 bg-selfgray">
						<div class="fs-32 fw-b mb-32">
							{{ info.RoomName }} {{ info.RoomNo }}
						</div>
						<div class="flex flex-s-c">
							<div class="fs-26 color-dark lh-36 checkin">
									<div v-if="info.SaleType === 0">
										<p class="mb-16">入住时间</p>
										<p>离店时间</p>
									</div>
									<div v-if="info.SaleType === 1">
										<p class="mb-16">开始时间</p>
										<p>结束时间</p>
									</div>
									<div class="line"></div>
									<div>
										<p class="mb-16">{{ info.BookStartTime }}</p>
										<p>{{ info.BookEndTime }}</p>
									</div>
							</div>
							<div class="fs-26 param15" v-if="info.SaleType === 0">共{{ info.Amount }}晚</div>
							<div class="fs-26 param15" v-if="info.SaleType === 1">共{{ info.Amount/2 }}小时</div>
						</div>								
					</div>
				</div>
				
				<div class="pb-100" >
					<div v-if="info.CouponMoney !== 0">
						<div class="bg-white pd-24 mg-24 br-16">
							<div class="pb-24 mb-24 ordermsg_title fs-28 fw-b">订单金额</div>
							<div>
								<div class="mb-10 flex flex-s-c">
									<p class="fs-28">订单原价：</p>
									<p class="fs-28">￥{{ info.PriceSum }}</p>
								</div>
								<div class="mb-10 flex flex-s-c">
									<p class="fs-28">优惠券：</p>
									<p class="fs-28 param15">-￥{{ info.CouponMoney }}</p>
								</div>
								<div class="mb-10 flex flex-s-c">
									<p class="fs-28">实际付款：</p>
									<p class="fs-40 param15"><span class="fs-28">￥</span>{{ info.ReceiptMoney }}</p>
								</div>
							</div>
						</div>
					</div>
					<div class="bg-white br-16 pd-24 mg-24" v-if="info.OrderBookMemberList && info.OrderBookMemberList.length > 0">	
						<div class="fs-28 fw-b mb-24">入住人信息</div>
						<li class="ads-item h-184 ptb-32" v-for="(item,index) in info.OrderBookMemberList" :key="index">
							<div class="flex-s-c ">
								<div class="flex-1">
									<div class="flex flex-s-c">
										<div class="flex flex-v-c"><p class="mr-10 fs-32 fw-b">{{ item.UserName }}</p><p class="user">入住人</p></div>
										<div class="fs-28 fw-b">{{ item.UserTel }}</div>
									</div>
									<div class="flex flex-s-c mt-14">
										<div class="fs-28 color-gray-light">
										<span v-if="item.UserIdentType === 0">身份证</span>
										<span v-if="item.UserIdentType === 1">护照</span>
										<span v-if="item.UserIdentType === 2">港澳通行证</span>
										{{item.UserIdentityCard? item.UserIdentityCard.replace(/^(.{6})(?:\w+)(.{4})$/, '\$1********\$2') : '--'}}
										</div>
										<div @click="goAddCheckIn(item,index)">查看信息<svg-icon icon-class="right" class="fs-24 ml-10" @goPage="goAddCheckIn(item,index)"/></div>
									</div>
								</div>
							</div>
						</li>
					</div>

					<div class="bg-white pd-24 mg-24 br-16">
						<div class="pb-24 mb-24 ordermsg_title fs-28 fw-b">订单信息</div>
						<div>
							<div class="mb-10">
								<span class="color-gray7 mr-10">订单编号：</span>
								<span class="fs-26">{{ info.Sn }}</span>
							</div>
							<div class="mb-10">
								<span class="color-gray7 mr-10">下单时间：</span>
								<span class="fs-26">{{ info.OrderAddTime }}</span>
							</div>
							<div class="mb-10">
								<span class="color-gray7 mr-10" v-if="info.SaleType === 0"> 到店时间：</span>
								<span class="color-gray7 mr-10" v-if="info.SaleType === 1"> 使用时间：</span>
								<span class="fs-26" v-if="info.State === 2 || info.State === 5">{{ info.ActualStartTime }}</span>
							</div>
						</div>
					</div>
				</div>
			
				
				<!-- 底部确认订单 -->
				<div class="fixed-bottom flex flex-fe-c pr-24 ptb-24 bg-white" v-if="info.State == 1 || info.State == 2">
					<button class="ml-8 sef-btn br-32 color-dark fs-24 plr-38 h" native-type="submit"
							v-if="info.State == 1" @click="CancleOrder(info)"> 取消订单</button>
					<button class="ml-8 other-btn br-32 color-white fs-24 plr-38 h" native-type="submit"
							v-if="info.State == 1 && info.SaleType === 0" @click="OrderBookIn(info)">办理入住</button>
					<button class="ml-8 other-btn br-32 color-white fs-24 plr-38 h" native-type="submit"
							v-if="info.State == 1 && info.SaleType === 1" @click="teaOrderBookIn(info)">立即使用</button>
					<button class="ml-8 other-btn br-32 color-white fs-24 plr-38 h" native-type="submit"
							v-if="info.State == 2 && info.SaleType === 0" @click="OrderBookOut(info)">办理退房</button>
					<button class="ml-8 br-32 color-white fs-24 plr-38 other-btn" native-type="submit"
							v-if="info.State == 2" @click="GetRoomQrCode(info)">开门码</button>
				</div>			
			
				<van-popup v-model="showCheckIn" position="bottom" style="height:100vh;">
					<addCheckIn :checkInData="checkInMsg.data" :checkInIndex="checkInMsg.index"  @close="showCheckIn=false"  />
				</van-popup>
			</div>
			<!-- 开门码弹窗 -->
			<van-dialog v-model="posterShow" class="posterDiv" :showConfirmButton="false" width="80%">
				<div class="poster_main  bg-white bblr-32 bbrr-32 mb-70">
					<SvgIcon icon-class="close" class="fs-60  closecss z-out color-dark" @goPage="closeQrcode" />
					<div class="qrcode" id="qrcode" ref="qrcode"><img class="is-200" :src="qrcode"/></div>
					<div class="mt-40">将此二维码对准设备，即可开门</div>
				</div>
				<div class="flex flex-sa-c">
					<div class="flex flex-d-c flex-center flex-1">
						<div class="flex flex-center down br-54">
							<svg-icon icon-class="down" class="fs-40 color-white" />
						</div>
						<span class="fs-36 lh-40 mt-16 color-white">长按二维码保存图片</span>
					</div>
				</div>
			</van-dialog>
  </div>
</template>
<script>
import SvgIcon from 'components/SvgIcon'
import orderTop from 'components/physioOrder/orderTop.vue'
import imgBox from 'components/imgBox'
import jrQrcode from "jr-qrcode";
import { OrderRefundApply } from 'api/teaHouse'
import { CancleOrder,GetOrderBookInfo,OrderBookInByStore,OrderBookOutByStore,GetRoomQrCode } from 'api/teaHouse'
import addCheckIn from './addCheckIn.vue'
export default ({
	components: {
    orderTop,		
		imgBox,
		SvgIcon,
		addCheckIn
  },
	props: {},
	data(){
		return{	
			orderId: 0,
			model: {},
			refundApply: false, 
			param: {}, //申请退款传参
			switch30: 0, //申请退款是否显示(0不显示 1显示)
			blank: false, // 是否为空数据
      posterShow: false, // 二维码弹窗显示
      qrcode: '', // 二维码图片地址
      ewm: '', // 点击开门码时存储所带数据生成二维码内容
      infos: {}, // 点击下载二维码存储所带数据(h5下载二维码图片名称)嵌套小程序只需长按图片保存所以
			remainder: '', //剩余支付时间
			paym: 0, //订单支付剩余分钟数
			pays: 0, //订单支付剩余秒数
			h: 0,	//服务剩余小时
			m: 0,	//服务剩余分钟
			s: 0, //服务剩余秒
			showPayTime: false, //是否显示订单支付倒计时
			technician: true,
			changeData: [],
      activeUnitRatio: 1,
			cartRequestList: [],
			userCarListInput: {
        list: []
      }, // 购物车数据
			isBr50: true, //用来判断图片圆形
			info:{
				Sn: '',
			},
			addressList:[],
			checkInMsg: {
				data: {},
				index: 0,
			},
			showCheckIn: false,
			info: {}, //订单信息
		}
	},
	created(){
		this.orderId = this.$route.params.id  //订单id
		console.log(this.orderId,"订单idd")
		this.GetOrderBookInfo()	
	},	
	methods:{
		GetOrderBookInfo(){
			GetOrderBookInfo(this.orderId).then(res => {
				if(res){
					this.info = res.Data
				}
			})
		},
		refund(item){
			this.refundApply = true
			this.param.OrderId = item.OrderId
		},
		// 确认申请退款
		OrderRefundApply() {
      if (this.param.reason == '') {
          this.$toast('请输入退款原因')
          return
      }
      OrderRefundApply({
        orderId: this.param.OrderId,
        reason: this.param.reason,
        image: ''
      }).then(res => {
        if (res.Data) {
          // 获取列表
          this.reset()
      	}
      })
    },
		
		reset(){
			this.GetOrderBookInfo()
		},
		goAddCheckIn(item = {},index){
			this.showCheckIn = true
			this.checkInMsg.data = item
			this.checkInMsg.index = index
		},
		// 入住
		OrderBookIn(item) {
			this.$router.push('/roomManageCheckIn/' + item.OrderId)
		},
		teaOrderBookIn(item) {
			OrderBookInByStore({orderId:item.OrderId,isOrderBookIn: 1,}).then(res => {
				if(res.Data){
					this.reset()
				}
			})
		},
		// 退房
		OrderBookOut(item) {
			OrderBookOutByStore(item.OrderId).then(res => {
				if (res.Data) {
					// 获取列表
					this.reset()
				}
			})
		},
		
		// 取消订单
		CancleOrder(item) {
			ConfirmOrderRefundByStore(item.OrderId).then(res => {
				if (res.Data) {
					// 获取列表
					this.reset()
				}
			})
		},
		
		// 开门码
		GetRoomQrCode(item) {
			this.infos = item
			GetRoomQrCode(item.OrderId).then(res => {
				if (res.State == 0) {
						return
				}
				this.ewm = res.Data
				this.$nextTick(()=>{
						let imgBase64 = jrQrcode.getQrBase64(this.ewm, {//生成二维码
							padding       : 10,   // 二维码四边空白（默认为10px）
							width         : 200,  // 二维码图片宽度（默认为256px）
							height        : 200,  // 二维码图片高度（默认为256px）
							correctLevel  : QRErrorCorrectLevel.H,    // 二维码容错level（默认为高）
							reverse       : false,        // 反色二维码，二维码颜色为上层容器的背景颜色
							background    : "#ffffff",    // 二维码背景颜色（默认白色）
							foreground    : "#000000"     // 二维码颜色（默认黑色）
						});  //options为配置对象，支持以下配置参数：
						this.qrcode = imgBase64
				})
				this.posterShow = true
			})
		},
		// 为了防止重复生成二维码，使用置空
		closeQrcode() {
			this.posterShow = false
			setTimeout(function(){
				this.qrcode = ''
			},150)
		},
		// 下载二维码
		saveImg() {
			let myCanvas = document.getElementById("qrcode").getElementsByTagName("img")
			let elink = document.createElement("a")
			elink.style.display = "none"
			document.body.appendChild(elink)
			elink.href = myCanvas[0].src
			elink.download = this.infos.RoomNo + this.infos.RoomName +  "核销码"
			elink.click()
			document.body.removeChild(elink)
		},
		hideMiddle(val) {
			return `${val.substring(0,3)}****${val.substring(val.length-3)}`
		}
	}

})
</script>
<style lang="scss" scoped>
	.nav-top{
		width: 750px;
		height: 362px;
		background: $param15;
	}
	.title{
		color: #fff;
		padding: 32px 0 20px 24px;
		display: flex;
		align-items: center;
		font-family: PingFangSC-Regular, PingFang SC;
		.status{
			font-size: 40px;
			font-weight: 500;
			margin-right: 16px;
		}
	}

	.btn {
		width: 170px;
		height: 64px;
		line-height: 64px;
		border-radius: 32px;
		text-align: center;
		margin-right: 24px;
	}

	.ordermsg_title{
		border-bottom: 0.026667rem solid #F2F3FC;
	}
	
	.checkin{
		display: flex;
		align-items: center;
	}
	.line{
		width: 4px;
		height: 56px;
		background: #D8D8D8;
		margin: 0 16px;
	}
	.param15{
		color: $param15;
	}
	.user{
		border-radius: 6px;
		border: 1px solid #979797;
		padding: 0px 5px;
		color: #999;
	}
	.sef-btn{
		background: #FFFFFF;
		height: 64px;
		line-height: 64px;
		border: 1px solid #666666;	
	}
	.other-btn {
		@include bg-primary;
		height: 64px;
		line-height: 64px;
		border: 1px solid transparent !important;
	}
	.closecss {
		top: 20px;
		right: 16px;
		width: 50px;
		height: 50px;
		position: absolute;
	}
	.poster_main {
		text-align: center;
		padding: 62px 60px 62px;
		img {
			width: 450px;
			height: 450px;
		}
		p {
			font-size: 28px;
			color: #F54F1B;
			padding: 30px 0;
			font-weight: 500;
		}
		div {
			font-size: 28px;
			color: #333;
			font-weight: 400;
		}
	}
	
	/deep/.posterDiv {
			background-color: transparent;
	}

	.down {
			width: 96px;
			// height: 96px;
			// background: #8AC24C;
	}
</style>
